<template>
  <div>
    <div class="table-default">
      <el-button type="primary" class="backBtn" @click="backHandler">返回</el-button>

      <div id="base" ref="base">
        <el-descriptions :column="3" border title="基本信息">
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="退料计划单号">{{ formData.docno }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="创建时间">{{ formData.created_at }}</el-descriptions-item>
          <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="更新时间">{{ formData.updated_at }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div id="details" ref="details">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="退料计划单-明细" name="details">
            <el-table :data="tableData" class="mt-3" v-loading="loading" border>
              <el-table-column label="领料单号" prop="pick_order_no" width="250" />
              <el-table-column label="品号" prop="material_no" width="150" />
              <el-table-column label="品名" prop="material.fname" width="150" />
              <el-table-column label="单位" prop="material.funit_name" width="150" />
              <el-table-column label="规格" prop="material.fspecification" width="150" />
              <el-table-column label="仓库代码" prop="wms_code" width="180"/>
              <el-table-column label="仓库名称" prop="wms.fname" width="180"/>
              <el-table-column label="库位代码" prop="location" width="180"/>
              <el-table-column label="库位名称" prop="locations.repositoryname" width="180"/>
              <el-table-column label="原箱号" prop="lot_num" width="180"/>
              <el-table-column label="箱号" prop="lot_num" width="180"/>
              <el-table-column label="数量" prop="qty" >
                <template #default="scope">
                  {{ Number(scope.row.qty) }}
                </template>
              </el-table-column>
              <el-table-column label="创建者" prop="creator" />
              <el-table-column label="创建时间" prop="created_at" width="180"/>
              <el-table-column label="更新时间" prop="updated_at" width="180"/>
              <!-- <el-table-column label="操作" width="200">
          <template #default="scope">
            <Update @click="open(scope.row.id)" />
            <Destroy @click="destroy(api, scope.row.id)" />
          </template>
        </el-table-column> -->
            </el-table>
            <Paginate />
          </el-tab-pane>
          <el-tab-pane label="退料计划单-汇总" name="detailsAll">
            <el-table :data="detailAllList" class="mt-3"  border>
              <el-table-column label="领料单号" prop="pick_order_no" width="200" />
              <el-table-column label="品号" prop="material_no" width="120" />
              <el-table-column label="品名" prop="material.fname" width="200" />
              <el-table-column label="单位" prop="material.funit_name" width="150" />
              <el-table-column label="规格" prop="material.fspecification" width="150" />
              <el-table-column label="仓库代码" prop="wms_code" width="180"/>
              <el-table-column label="库位名称" prop="wms.fname" width="180"/>
              <el-table-column label="计划退料数量" prop="qty" width="130">
                <template #default="scope">
                  {{ Number(scope.row.qty) }}
                </template>
              </el-table-column>
              <el-table-column label="创建者" prop="material.creator" />
              <el-table-column label="创建时间" prop="material.created_at" width="180"/>
              <el-table-column label="更新时间" prop="material.updated_at" width="180"/>
              <!-- <el-table-column label="操作" width="200">
          <template #default="scope">
            <Update @click="open(scope.row.id)" />
            <Destroy @click="destroy(api, scope.row.id)" />
          </template>
        </el-table-column> -->
            </el-table>
            <Paginate />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { useRouter, useRoute } from 'vue-router'

let router = useRouter()
let route = useRoute()

const api = `production/return/byplan/detail?order_id=${route.query.id}`

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)
const activeName = ref('details')
let formData = ref({})

let getFormData = id => {
  http.get(`production/return/plan/${id}`).then(r => {
    formData.value = r.data.data
    console.log('详情单据头', formData.value)
  })
}

getFormData(route.query.id)

let detailAllList = ref([])

let getReturnPlanDetailAll = id => {
  http.get(`production/return/byplan/detail/groupby/${id}`).then(r => {
    detailAllList.value = r.data.data
    console.log('退料计划单详情汇总', detailAllList.value)
  })
}

getReturnPlanDetailAll(route.query.id)

const backHandler = () => {
  router.push('/production/returnPlanOrder')
}

onMounted(() => {
  search()
  deleted(reset)
})
</script>

<style lang="css">
.backBtn {
  margin: 20px 10px;
}
.demo-tabs{
  margin-top: 20px;
}
</style>
